<template>
  <el-upload
    v-if="type == 'file'"
    ref="uploadRef"
    :file-list="fileList"
    action=""
    :http-request="submitUpload"
    :on-change="handleChange"
  >
    <template #trigger>
      <el-button type="primary">选择文件</el-button>
    </template>
  </el-upload>
  <el-upload
    v-else
    ref="uploadRef"
    :class="{ hide: hideUpload }"
    :file-list="fileList"
    action=""
    list-type="picture-card"
    :on-change="handleChange"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :http-request="submitUpload"
    drag
  >
    <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">拖拽文件 <em>点击上传</em></div>
    <template #file="{ file }">
      <div>
        <img
          v-if="checkImgType(file.name)"
          class="el-upload-list__item-thumbnail"
          :src="file.url"
          alt=""
        />
        <video
          v-else-if="checkVideoType(file.name)"
          :src="file.url"
          controls
          style="width: 100%; height: 100%"
        ></video>
        <span v-else>{{ file.name }}</span>
        <span class="el-upload-list__item-actions">
          <span
            v-if="checkImgType(file.name)"
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span class="el-upload-list__item-delete" @click="Remove(file)">
            <el-icon>
              <Delete />
            </el-icon>
          </span>
        </span>
      </div>
    </template>
    <template #tip>
      <div class="el-upload__tip">可拖拽</div>
    </template>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img :src="dialogImageUrl" alt="Preview Image" w-full style="width: 100%" />
  </el-dialog>
</template>
<script setup>
import { ref, watch, onMounted } from "vue";
import { Plus, UploadFilled, Delete, ZoomIn } from "@element-plus/icons-vue";
const emit = defineEmits(["updateFile", "removeFile"]);
const fileList = ref([]);
const uploadRef = ref(null);
const dialogVisible = ref(false);
const dialogImageUrl = ref();
const hideUpload = ref(false);
const props = defineProps({
  imageUrl: { type: Object, default: { name: "", url: "" } },
  filePath:{type:String,default:''},
  type: { type: String, default: "" },
});
onMounted(() => {
  if (props.imageUrl) {
    if (props.imageUrl.url) {
      hideUpload.value = true;
      fileList.value[0] = props.imageUrl;
    }
  }
  if(props.filePath){
    hideUpload.value = true;
    fileList.value[0] ={
      
      url:props.filePath,
      name:''
    }
  }
});
watch(
  () => props.imageUrl,
  (newvalue, oldvalue) => {
    hideUpload.value = true;
    fileList.value[0] = newvalue;
  },
  {
    deep: true,
  }
);
watch(()=>props.filePath,()=>{
  hideUpload.value = true;
  fileList.value[0] ={
      url:props.filePath,
      name:''
    }
})
const handlePictureCardPreview = (file) => {
  if (fileList.value.length) {
    dialogImageUrl.value = fileList.value[0].url;
  } else {
    dialogImageUrl.value = URL.createObjectURL(file.raw);
  }
  dialogVisible.value = true;
};

const handleChange = (file, fileList) => {
  hideUpload.value = fileList.length > 0;
  if (fileList.length > 1) {
    fileList.splice(0, 1);
  }
};

const handleRemove = (file, fileList) => {
  hideUpload.value = fileList.length > 0;
  emit("removeFile");
};
const Remove = (file) => {
  uploadRef.value.handleRemove(file);
};
const submitUpload = (data) => {
  emit("updateFile", data.file);
};
const checkImgType = (row) => {
  if (!/\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(row)) {
    return false;
  } else {
    return true;
  }
};
const checkVideoType = (row) => {
  if (!/\.(mp4|mov|avi|flv|qt)$/.test(row)) {
    return false;
  } else {
    return true;
  }
};
</script>
<style lang="scss" scoped>
:deep(.el-upload) {
  --el-upload-dragger-padding-horizontal: 32px;
}

:deep(.el-upload-dragger) {
  border: 0px;
}

.hide {
  :deep(.el-upload--picture-card) {
    display: none;
  }
}

:deep(.el-icon--upload) {
  font-size: 40px;
  margin-bottom: 0px;
}

:deep(.el-upload__text) {
  font-size: 10px;
}
</style>